<template>
  <div class="gantt-box">
    <div class="gantt-box-flex">
      <div class="gantt-header">
        <div class="scheme-title">
          <div class="scheme-item">
            <span class="item-title">运费：</span>
            <span class="item-val">{{caseDetail.freight}}</span>
          </div>
          <div class="scheme-item">
            <span class="item-title">时间：</span>
            <span class="item-val">{{caseDetail.day}}天</span>
          </div>
          <div class="scheme-item">
            <span class="item-title">船队利用率：</span>
            <span class="item-val">{{caseDetail.ship }}</span>
          </div>
          <div class="scheme-item">
            <span class="item-title">贸易利润率：</span>
            <span class="item-val">{{caseDetail.trade}}</span>
          </div>
        </div>
      </div>
      <HightChartsScheme :indexId="indexId"
                         :firstShipLoadingTime="firstShipLoadingTime"
                         :scaleUnit="scaleUnit"
                         :ganttConfig="ganttConfig"
                         @changeVal="onChangeDate"/>
    </div>
  </div>
</template>

<script setup>
import {defineProps, onMounted, ref, watch} from "vue";
import HightChartsScheme  from '../ScedulGantt/HightChartsScheme.vue'
import dayjs from "dayjs";
// 贸易类型
const areas = ref([
  {
    label: '长协',
    value: '1'
  },
  {
    label: '中期',
    value: '2'
  },
  {
    label: '现货',
    value: '3'
  }
])
// 贸易主体
const tradeareas = ref([
  {
    label: '国贸',
    value: 1
  },
  {
    label: '新贸',
    value: 2
  },
])
const scaleUnit = ref('')//船舶排布
const firstShipLoadingTime = ref('')
const props = defineProps({
  indexId: {
    type: Number,
    required: 0
  },
  caseInfo: {
    type:Object,
    default: () => {}
  }
})
const caseDetail = ref(props.caseInfo)
watch(() => props.caseInfo, (newVal) => {
  caseDetail.value = newVal
  firstShipLoadingTime.value = newVal.firstShipLoadingTime?newVal.firstShipLoadingTime : Date.now()
  console.log('有数据A', newVal)
  getLastData(newVal)
})
const onChangeDate = (val) => {
  scaleUnit.value = val
}
const ganttConfig = ref({
  // 数据源
  data: [],
  // 左侧表格列配置
  tableConfig: [],
})
const getLastData = (val) => {
  ganttConfig.value.tableConfig = []
  ganttConfig.value.data = []
  if (val) {
    firstShipLoadingTime.value = val.firstShipLoadingTime?val.firstShipLoadingTime : Date.now()
    let shipData = val.shipNames
    shipData.map((item, index) => {
      ganttConfig.value.tableConfig.push(item.shipName)
      if (item.details.length > 0 && item.details) {
        item.details.map(child => {
          ganttConfig.value.data.push(Object.assign({}, child, {
            id: child.id.toString(),
            y: index,
            color: 'rgba(22,93,255,0.64)',
            tradeTypeLabel: tradeTypeFn(child.tradeType),
            tradeBodyLabel: tradeBodyFn(child.tradeBody),
            completed: child.expectedFullLoadVoyageDays / (child.expectedFullLoadVoyageDays + child.expectedEmptyLoadVoyageDays),
            draggable: true,
            start: dayjs(child.expectedLoadingDate).valueOf(),
            end: dayjs(child.expectedEmptyReturnWindow).valueOf(),
          }))
        })
      }
    })
  }
}
/**
 * 颜色切换
 * */
const colorFn = (i) => {
  const colors = ['rgba(149,26,230,0.64)',  'rgba(0,40,243,0.64)', 'rgba(233,0,26,0.64)',]
  return colors[i]
}
/**
 * 贸易主体赋值
 * */
const tradeBodyFn = (val) => {
  let lastVal = ''
  tradeareas.value.map(item => {
    if (item.value === val) {
      lastVal = item.label
    }
  })
  return lastVal
}
/**
 * 贸易类型赋值
 * */
const tradeTypeFn = (val) => {
  let lastVal = ''
  areas.value.map(item => {
    if (item.value === val) {
      lastVal = item.label
    }
  })
  return lastVal
}
onMounted(() => {
  getLastData(caseDetail.value)
})
</script>

<style lang="scss" scoped>
.scheme-title {
  display: flex;
  .scheme-item {
    font-size: 16px;
    padding-right: 46px;
    line-height: 70px;
    .item-title {
      color: #6B7A8B;
    }
    .item-val {
      color: #2C3749;
    }
  }
}
</style>
